<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="../static/css/styleoneadd.css">
<link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">

<style>
    body{
        background-color: #f2f2f2 !important;
    }
</style>

<!-- 内容主体区域 -->
<div class="layui-fluid-pad" ng-app="modifyPaperApp" ng-controller="modifyPaperController">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">编辑问卷</div>
            <div class="layui-card-body">
                <div class="layui-row  layui-pad15">
                    <form class="layui-form" action="">
                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md2" style="width: 10%">问卷名称</div>
                                <div class="layui-col-md3">
                                    <input type="text" name="title" id="content" ng-model="paperContent"  autocomplete="off" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md2" style="width: 10%">问卷类型</div>
                                <div class="layui-col-md3">
                                    <select name="city" class="form-control" id="classType" lay-ignore>
                                        <option value="">请选择问卷类型</option>
                                        <option value="{{type.typeName}}" ng-repeat="type in typeList">{{type.typeName}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-addStyle"></div>
                        <!--<div class="layui-col-md12 layui-col-lh">-->
                            <!--<a href="#" class="layui-btn" id="addwenjuan">添加</a>-->
                        <!--</div>-->
                        <div class="layui-col-md12 layui-text-center">
                            <button type="button" class="layui-btn layui-btn-w layui-t-h" ng-click="saveModify()">
                                <i class="layui-icon">&#xe681;</i>
                                提交
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>


<script src="../static/js/jquery.min.js"></script>
<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/angular.js"></script>
<script src="../static/js/app/consts/consts.js"></script>
<script>

    var currentPaperId = "";
    var paperChange = [];

    Array.prototype.distinct = function (){
        var arr = this,
            i,
            j,
            len = arr.length;
        for(i = 0; i < len; i++){
            for(j = i + 1; j < len; j++){
                if(arr[i] == arr[j]){
                    arr.splice(j,1);
                    len--;
                    j--;
                }
            }
        }
        return arr;
    };

    var updateSerialURL = baseUrl + "/exam/updateSerial";
    var getPaperByIdURL = baseUrl + "/exam/getPaperById";
    var getAllTypeURL = baseUrl + "/exam/getAllType";

    var app = angular.module('modifyPaperApp',['ng']);
    app.controller('modifyPaperController', function ($scope, $http) {
        
        //提交按钮
        $scope.saveModify = function () {
            var paperId = currentPaperId;
            var classType = $("#classType").val()?($("#classType").val()):"";
            if(!classType) {
                alertMsg("请选择问卷类型");
                return
            }

            var content = $scope.paperContent?$scope.paperContent:"";
            console.log(content + "******" + $scope.paperContent);
            if(!content) {
                alertMsg("请输入问卷名称");
                return
            }

            $('option:selected').each(function(){
                console.log($(this).val());
                paperChange.push($(this).val())
            });

            paperChange  = paperChange.distinct();
            paperChange.splice(0, 1);
            console.log(paperChange);
            var data = {
                token:"aaaaaaaa",
                paperId:paperId,
                answerSerial:paperChange,
                classType:classType,
                paperContent:content
            }

            var url = updateSerialURL;

            $http.post(url, JSON.stringify(data)).then(function successCallback(result) {
                console.log(result.data.message);
                window.location.href = "paperManage.html";
            });

        }
        
        
        $(function () {
            var url = location.search;
            console.log(url);
            var paperId = "";
            if(url.indexOf("?") != -1) {
                var str = url.substr(1);
                paperId = str.split("=")[1];
            }
            currentPaperId = paperId;
            console.log(paperId);
            $http({
                method:"POST",
                url:getPaperByIdURL,
                data:{
                    token:"1234567890",
                    paperId:paperId
                },
                headers:{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
                transformRequest: function(obj) {
                    var str = [];
                    for(var p in obj){
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                }
            }).then(function successCallback(result) {
                console.log(result.data.data);
                var data = result.data.data;
                $scope.paperContent = data.paperName;
                var questionList = data.questionList;
                console.log(questionList);
                for(var i = 0; i  < questionList.length; i++) {
                    var optionType = questionList[i].optionType;
                    if(optionType === 1) {
                        danxuan(questionList[i], questionList.length);
                    } else if(optionType === 2) {
                        duoxuan(questionList[i], questionList.length);
                    }
                }
            });
            //获取所有的问卷的类型
            $http({
                method:"GET",
                url:getAllTypeURL,
                params:{
                    token:"123456"
                }
            }).then(function successCallback(result) {
                $scope.typeList = result.data.data;
            });
        });
    });

    function deleteDIV(that) {
        $(that).parents('.layui-col-lh').remove();
    }

    //多选题目展示
    function duoxuan(data, length) {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh layui-form" lay-filter="test2" style="border:1px solid #ccc;">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md12" style="padding-left:9px;">';
        html += '<span style="font-size: 15px;font-weight: bold">'+ data.questionSerial + '、' + data.content + '</span>';
        html += '<input type="hidden" value="' + data.questionsId + '"/>';
        html += '</div>';
        html += '<div class="layui-col-md12 layui-left-pad15">';
        html += '<div class="layui-row">';
//        html += '<div class="layui-col-md12 layui-margin-bot" >';
        var answers = data.answers;
        for(var i = 0 ;i < answers.length; i++) {
//            html += '<div class="layui-col-md12  layui-margin-bot">';
            html += '<div class="layui-mingzi layui-col-md12" style="display: inline-block;float: none;margin:5px 0px;">';
            html += '<input type="checkbox" name="" lay-skin="primary" >';
            html += '<div class="layui-unselect layui-form-checkbox" lay-skin="primary" ><i class="layui-icon"></i> </div>';
            html += '<label style="margin-left: 5px;margin-right: 5px">' + answers[i].content + '</label>';


            if(data.questionSerial !== length){
                html += '<div class="layui-input-inline">';
                html += '<select name="quiz1" id="quiz1" style="display:inline-block;" class="form-control" lay-ignore>';
                html += '<option value="">请选择题号</option>';
                for(var j = data.questionSerial + 1;j <= length; j++) {
                    html += '<option value="'+ answers[i].id + ',' + j + '">' + j + '</option>';
                }
                html += '</select></div>';
                html += '<input type="radio" name="ying" value="" title="" style="display: inline-block;margin-left:10px;" lay-ignore>';
            }
            html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';

        $(".layui-addStyle").append(html);
    }

    //单选题目展示
    function danxuan(data, length) {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh" style="border:1px solid #ccc;">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md12" style="padding-left:9px;">';
        html += '<span style="font-size: 15px;font-weight: bold">' + data.questionSerial + '、' +  data.content + '</span>';
        html += '<input type="hidden" value="' + data.questionsId + '"/>';
        html += '</div><div class="layui-col-md12 layui-left-pad15">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md12 layui-margin-bot">';
        var answers = data.answers;

        for (var i = 0 ;i < answers.length; i++) {
            html += '<div class="layui-mingzi" style="display: inline-block;float: none ;">';
            html += '<input type="radio" name="sex" value="' + answers[i].content +'" title="' + answers[i].content + '"/>';
            html += '<div class="layui-unselect layui-form-radio">';
            html += '<i class="layui-anim layui-icon"></i><div>' + answers[i].content + '</div></div>';
            html += '</div>';

            if(data.questionSerial !== length){
                html += '<div class="layui-input-inline"  style="margin-right: 10px">';
                html += '<select name="quiz1" style="display: inline-block" class="form-control" lay-ignore>';
                html += '<option value="">请选择题号</option>';
                for(var j = data.questionSerial + 1;j <= length; j++) {
                    html += '<option value="'+ answers[i].id + ',' +  j + '">' + j + '</option>';
                }
                html += '</select></div>';
            }

        }
        html += '</div>';
        html += '</div></div></div></div>';

        $(".layui-addStyle").append(html);

    }

    function alertMsg(msg) {
        layui.use(['layer'], function () {
            var layer = layui.layer;
            layer.msg(msg);
        });
    }

    //Demo
    layui.use(['form','layer'], function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });

        //增加选项
        $(function () {
            $('#addwenjuan').on('click',function () {
                var strU = '创建问卷题型.html';
                layer.open({
                    type: 2,
                    title:'平台单向库',
                    area: ['850px', '650px'],
                    shadeClose: true, //开启遮罩关闭
                    content: strU
                });
            });
        });



    });
</script>


